<template>
  <div>
    <van-tabbar
      :safe-area-inset-bottom="true"
      v-model="active"
      active-color="#ee0a24"
      inactive-color="#333"
      route
      placeholder
      z-index="2"
    >
      <van-tabbar-item icon="home-o" to="/index">首页</van-tabbar-item>
      <van-tabbar-item style="padding-top: 3px; width: 22px" replace to="/menu">
        <template #icon="props">
          <img
            :src="
              props.active ? require('../assets/img/meishi-active.svg') : require('../assets/img/meishi.svg')
            "
          />
        </template>
        <span>菜谱</span>
      </van-tabbar-item>
      <van-tabbar-item icon="add-o" class="addIcon" to="/upload"></van-tabbar-item>
      <van-tabbar-item icon="bag-o" to="/square">集市</van-tabbar-item>
      <van-tabbar-item icon="contact" replace to="/myinfo">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    }
  },
}
</script>
<style>
.addIcon .van-icon{
  color: #ee0A24 !important;
  font-size: 30px ;
  margin-top: 5px;
}
</style>

